<template>
  <div class="detail"
       style="float: left">
    <div class="delivery-time">
      <span>下单时间</span>
      <span>{{personOrderList.create_time}}</span>
    </div>
    <div class="address">
      <span>送货地址</span>
      <div class="first-aid">
        <p>{{personOrderList.delivery_address}}</p>
        <p>{{personOrderList.bed_no | capitalize}}床</p>
      </div>
    </div>
    <div class="detail-main">
      <span>订单详情</span>
      <div class="nourishment">
        <p>{{personOrderList.restaurant_name}}</p>
        <div style="height:4.3rem; overflow:scroll">
          <div class="detList"
               v-for="(item, index) in personOrderList.goodsInfo"
               :key="index"
               v-show="item.num!==0">
            <div class="detImg">
              <img :src="item.picture"
                   alt>
            </div>
            <div class="detTitle">
              <h3>{{item.goods_name}}（<span v-text="item.type_id===1?'早餐':item.type_id===2?'午餐':'晚餐'"></span>）</h3>
              <p>x{{item.num}}</p>
              <p>￥{{item.price}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="allprice">
        <span>总金额</span>
        <span>￥{{personOrderList.total_amount}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import urls from '../../../common.js'
export default {
  name: 'detail',
  data () {
    return {
      data: this.personOrderList.bed_no
    }
  },
  created () {
    var _this = this
    if (this.bedNo) {
      _this.$http.get(urls.homeInfo + '/' + _this.bedNo).then(result => {
        if (result.body.code === '200') {
          _this.data = result.body.data
        }
      })
    }
  },
  props: ['personOrderList'],
  filters: {
    capitalize: function (value) {
      value = value.substring(4)
      return value
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl'
.delivery-time, .address, .detail-main
  width 13.62rem
  border-radius 0.2rem
  background-color $color-white
  margin-bottom 0.2rem
  padding 0 0.3rem
  font-size 0.28rem
  span
    &:nth-of-type(1)
      color $color-main
.delivery-time
  height 0.8rem
  line-height 0.8rem
  span
    &:nth-of-type(2)
      margin-left 9.2rem
.address
  height 1.2rem
  padding-top 0.2rem
  .first-aid
    float right
    text-align right
    text-wrap normal
    p
      margin 0
      text-wrap normal
.detail-main
  height 7rem
  margin 0
  padding-top 0.2rem
  .nourishment
    width 13rem
    height 4.4rem
    margin 0.5rem 0
    p
      font-size 0.28rem
      color $color-price
    .detList
      clear both
      overflow hidden
      width 50%
      display inline-block
      .detImg
        float left
        width 1.4rem
        height 1.4rem
        border-radius 0.15rem
        margin-right 0.25rem
        overflow hidden
        img
          width 100%
          height 100%
      .detTitle
        width 2.9rem
        height 1.4rem
        float left
        padding 0.2rem 0
        font-size 0.22rem
        margin-right 1.95rem
        margin-bottom 0.3rem
        h3
          color $color-price
          margin-bottom 0.4rem
        p
          &:nth-of-type(1)
            float left
            color $color-aaa
          &:nth-of-type(2)
            color $color-red
            float right
  .allprice
    float right
    text-align center
    span
      font-size 0.34rem
      &:nth-of-type(1)
        color $color-price
      &:nth-of-type(2)
        color $color-red
p
  margin-bottom 0.2rem !important
</style>
